<script setup>
import router from "@/router/index.js";
import {onMounted} from "vue";
import {ref} from 'vue'
import {cancelCollectApp, collectApp} from "@/api/app.js";
import {Message} from "@arco-design/web-vue";
import ShareModal from "@/components/ShareModal.vue";

const props = defineProps({
  id: {
    type: [String, null],
    required: false,
    default: null
  },
  appIcon: {
    type: [String, null],
    required: false,
    default: null
  },
  appName: {
    type: [String, null],
    required: false,
    default: null
  },
  appDesc: {
    type: [String, null],
    required: false,
    default: null
  },
  userId: {
    type: [String, null],
    required: false,
    default: null
  },
  avatar: {
    type: [String, null],
    required: false,
    default: null
  },
  nickname: {
    type: [String, null],
    required: false,
    default: null
  },
  isCollected: {
    type: Boolean,
    required: false,
    default: false
  }
})

const emit = defineEmits(['collect', 'share'])
const collectFlag = ref(false)
onMounted(() => {
  collectFlag.value = props.isCollected
})


const handleCollect = async () => {
  if (collectFlag.value) {
    try {
      const res = await cancelCollectApp(props.id)
      if (res.data.code === 1) {
        collectFlag.value = false
        Message.success("取消收藏成功")
      }
    } catch (error) {
      console.error(error);
    }
  } else {
    try {
      const res = await collectApp(props.id)
      if (res.data.code === 1) {
        collectFlag.value = true
        Message.success("收藏成功")
      }
    } catch (error) {
      console.error(error);
    }
  }
}

// 分享弹窗引用
const shareModalRef = ref();
// 分享链接
const shareLink = `${window.location.protocol}//${window.location.host}/#/app/${props.id}`;
// 分享
const doShare = () => {
  if (shareModalRef.value) {
    shareModalRef.value.openModal();
  }
};
</script>

<template>
  <div class="app-card">
    <!-- 应用封面 -->
    <div class="cover-container" :class="{'default-cover': !appIcon}" @click="router.push(`/app/${id}`)">
      <!-- 如果有封面图片，则显示封面图片 -->
      <img v-if="appIcon"
           :src="appIcon"
           :alt="appName"
           class="cover-image"
      />
      <!-- 没有封面图片时显示的应用名作为占位符 -->
      <span v-else>{{ appName }}</span>
    </div>

    <div class="app-info" >
      <!-- 应用标题 -->
      <a-typography-title :heading="6" class="app-title"  @click="router.push(`/app/${id}`)">
        {{ appName }}
      </a-typography-title>

      <!-- 应用描述 -->
      <a-typography-paragraph
        class="app-desc"
        :ellipsis="{ rows: 1 }"
        @click="router.push(`/app/${id}`)"
      >
        {{ appDesc }}
      </a-typography-paragraph>

      <!-- 底部信息栏 -->
      <div class="footer">
        <!-- 用户信息 -->
        <div class="user-info" @click="router.push(`/user/${userId}`)">
          <a-avatar v-if="avatar" :size="24" :image-url="avatar" class="user-avatar"/>
          <a-avatar v-else :size="24" :style="{ backgroundColor: '#33c9ff'}" class="user-avatar">
            <IconUser/>
          </a-avatar>
          <span class="user-nickname">{{ nickname }}</span>
        </div>

        <!-- 操作按钮 -->
        <a-space :size="12">
          <a-button
            shape="circle"
            type="text"
            @click="handleCollect"
            class="action-btn"
          >
            <template #icon>
              <icon-star :fill="collectFlag ? 'rgb(var(--orange-6))' : 'none'"/>
            </template>
          </a-button>
          <a-button
            shape="circle"
            type="text"
            @click="doShare"
            class="action-btn"
          >
            <template #icon>
              <icon-share-internal />
            </template>
          </a-button>
        </a-space>
      </div>
    </div>

    <ShareModal ref="shareModalRef" :link="shareLink" />
  </div>
</template>

<style scoped>
.app-card {
  border: 1px solid var(--color-neutral-4);
  width: 260px;
  transition: all 0.2s;
  cursor: pointer;
  border-radius: 4px; /* 圆角 */
  overflow: hidden; /* 防止内容溢出 */
  background-color: var(--color-bg-2); /* 背景色 */
}

.app-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.app-info {
  padding: 4px 20px;
}

.cover-container {
  width: 260px;
  height: 160px; /* 设置固定高度 */
  overflow: hidden;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-title {
  width: 220px;
  margin: 4px 0 4px 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-desc {
  width: 220px;
  color: var(--color-text-2);
  margin-bottom: 1px;
  min-height: 22px;
}

.footer {
  width: 220px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-nickname {
  color: var(--color-text-2);
  font-size: 12px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-btn {
  color: var(--color-text-2);
  transition: color 0.2s;
}

/* 默认渐变色背景 */
.default-cover {
  background: linear-gradient(45deg, #2eceff, #0a7aff);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
  font-weight: bold;
}
</style>
